<template>
  <div class="betting-buttons">
    <el-button
      v-for="option in options"
      :key="option.value"
      :type="isSelected(option.value) ? 'primary' : 'default'"
      :class="{ 'is-selected': isSelected(option.value), 'is-disabled': isOptionDisabled(option.value) }"
      :disabled="isOptionDisabled(option.value)"
      size="small"
      @click="toggleSelection(option.value)"
    >
      {{ option.label }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { submitBettingRecommendation } from "@/api/matches";
import { message } from "@/utils/message";

interface BettingOption {
  label: string;
  value: string;
}

interface Props {
  bettingId: number;
  winOdds?: string;
  drawOdds?: string | null;
  loseOdds?: string;
  recommendedResult?: string[];
}

const props = defineProps<Props>();

// 胜平负选项 - 使用computed让赔率能够响应式更新
const options = computed<BettingOption[]>(() => [
  { label: `胜 ${props.winOdds || "-"}`, value: "win" },
  { label: `平 ${props.drawOdds || "-"}`, value: "draw" },
  { label: `负 ${props.loseOdds || "-"}`, value: "lose" }
]);

// 当前选中的选项，初始化时使用已保存的推荐结果
const selectedOptions = ref<string[]>(props.recommendedResult || []);

// 监听props变化，同步更新选中状态
watch(
  () => props.recommendedResult,
  (newResult) => {
    selectedOptions.value = newResult || [];
  },
  { immediate: true }
);

// 判断选项是否被选中
const isSelected = (value: string): boolean => {
  return selectedOptions.value.includes(value);
};

// 判断选项是否应该被禁用（赔率为 '-' 时禁用）
const isOptionDisabled = (value: string): boolean => {
  switch (value) {
    case 'win':
      return !props.winOdds || props.winOdds === '-';
    case 'draw':
      return !props.drawOdds || props.drawOdds === '-';
    case 'lose':
      return !props.loseOdds || props.loseOdds === '-';
    default:
      return false;
  }
};

// 切换选项选中状态
const toggleSelection = async (value: string) => {
  // 如果选项被禁用，则不允许操作
  if (isOptionDisabled(value)) {
    return;
  }

  const index = selectedOptions.value.indexOf(value);

  if (index > -1) {
    // 如果已选中，则取消选中（反选）
    selectedOptions.value.splice(index, 1);
  } else {
    // 如果未选中，则添加到选中列表（多选）
    selectedOptions.value.push(value);
  }

  // 调用API提交推荐结果
  try {
    await submitBettingRecommendation({
      id: props.bettingId,
      recommendedResult: selectedOptions.value
    });

    message(
      `推荐结果已更新: ${selectedOptions.value.length > 0 ? selectedOptions.value.join(", ") : "无"}`,
      { type: "success" }
    );
  } catch (error) {
    message("提交推荐结果失败", { type: "error" });
    // 如果提交失败，回滚选择状态
    if (index > -1) {
      selectedOptions.value.push(value);
    } else {
      const rollbackIndex = selectedOptions.value.indexOf(value);
      if (rollbackIndex > -1) {
        selectedOptions.value.splice(rollbackIndex, 1);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.betting-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;

  .el-button {
    min-width: 70px;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 4px;
    white-space: nowrap;
    
    &.is-selected {
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
    }
    
    &.is-disabled {
      opacity: 0.5;
      cursor: not-allowed;
      
      &:hover {
        transform: none;
      }
    }
    
    &:hover:not(.is-disabled) {
      transform: translateY(-1px);
      transition: all 0.2s ease;
    }
  }
}
</style>
